<template>
	<view style="padding-top:3px;">
		<view v-if="editEnable" class="model-border" style="display: flex;align-items: center;">
			<view class="title"></view>
			<text class="icon-title">信息录入</text>
		</view>
		<view class="content">
			<view class="content_text">家庭成员</view>
			<u-input class="content-input" v-model="display.personNameLabel" :clearable="false" placeholder="请选择家庭成员" disabled
				@click="showFamilyMember = true" />
			<view class='right'>
				<image src='../../static/right.png'></image>
			</view>
		</view>
		<view class="content">
			<view class="content_text">职业</view>
			<u-input class="content-input" v-model="display.jobTypeLabel" :clearable="false" placeholder="请选择职业" disabled
				@click="showJobType = true" />
			<view class='right'>
				<image src='../../static/right.png'></image>
			</view>
		</view>
		<view class="content">
			<view class="content_text">
				<text>开始时间</text>
				<text style="color: red;">*</text>
			</view>
			<u-input class="content-input" v-model="form.work_at_start" :clearable="false" placeholder="请选择开始时间" type="number"
				disabled @click="showStartDate = true" />
			<view class='right'>
				<image src='../../static/right.png'></image>
			</view>
		</view>
		<view class="content">
			<view class="content_text">
				<text>结束时间</text>
				<text style="color: red;">*</text>
			</view>
			<u-input class="content-input" v-model="form.work_at_end" :clearable="false" placeholder="请选择结束时间" type="number"
				disabled @click="showEndDate = true" />
			<view class='right'>
				<image src='../../static/right.png'></image>
			</view>
		</view>
		<view class="content">
			<view class="content_text">
				<text>就业单位</text>
				<text style="color: red;">*</text>
			</view>
			<u-input class="content-input" v-model="form.work_unit" :clearable="false" placeholder="请输入就业单位" type="number" />
		</view>
		<view class="content">
			<view class="content_text">是否在职</view>
			<u-input class="content-input" v-model="display.isWorkingLabel" :clearable="false" placeholder="请选择是否在职" disabled
				@click="showIsWorking = true" />
			<view class='right'>
				<image src='../../static/right.png'></image>
			</view>
		</view>
		<view class="content_remack">
			<view class="content_text_remack">
				<text>备注</text>
			</view>
			<textarea v-model="form.remark" class="content_area"/>
		</view>
		<view v-if="editEnable" class="open_invoice" @click="submit">
			<text>提交</text>
		</view>
		<u-picker mode="time" v-model="showStartDate" @confirm="selectStartDate"></u-picker>
		<u-picker mode="time" v-model="showEndDate" @confirm="selectEndDate"></u-picker>		
		<u-select v-model="showJobType" :list="listJobType" @confirm="selectJobType"></u-select>
		<u-select v-model="showFamilyMember" :list="listFamilyMember" @confirm="selectFamilyMember"></u-select>
		<u-select v-model="showIsWorking" :list="listStatus" @confirm="selectIsWorking"></u-select>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import common from '../../common/common.js'
	export default {
		data() {
			return {
				dictValue: common.dictValue,
				createEnable: false,
				editEnable: true,
				show: false,
				showStartDate: false,
				showEndDate: false,
				showJobType: false,
				showFamilyMember: false,
				showHolds: false,
				showSex: false,
				showIsWorking: false,
				display:{},
				form: {},
				listJobType:this.formatDictValueToList(common.dictValue, "jobtype"),
				listFamilyMember:[],
				family_id: null,
				listStatus: this.formatDictValueToList(common.dictValue, "is_status"),
				
			}
		},
		onLoad(options) {
			this.family_id = options.family_id;
			if(options && options.item){
				options.item = decodeURIComponent(options.item);
				this.form.family_id = options.family_id;
			}
			if(options.item=="0"){
				this.createEnable = true;
			}
			if(options && options.item && options.item!="0"){				
				this.editEnable = false;
				this.form = JSON.parse(options.item);
				this.display = this.getValueLabels(common.dictValue, this.form);
				this.display.personNameLabel = this.form.person_name;
			}
			if(options.t == "edit"){
				this.editEnable = true;
			}
			console.log(this.form);
		},
		onShow(){
			this.getFamilyMembers();
		},
		methods: {
			getValueLabels(dictValue, values) {
				return {
					"jobTypeLabel": dictValue.jobtype[values.job_type],
				};
			},
			selectStartDate(e) {
				this.form.work_at_start = e.year + '-' + e.month + '-' + e.day
				console.log(e)
			},
			selectEndDate(e) {
				this.form.work_at_end = e.year + '-' + e.month + '-' + e.day
				console.log(e)
			},
			selectJobType(e) {
				this.form.job_type = e[0].value
				this.display.jobTypeLabel = e[0].label
			},
			selectFamilyMember(e) {
				this.form.person_id = e[0].value
				this.form.person_name = e[0].label
				this.display.personNameLabel = e[0].label
			},
			selectIsWorking(e){
				this.form.is_working = e[0].value
				this.display.isWorkingLabel = e[0].label
			},
			submit() {
				var that = this;
				if(this.checkForm()){
					var cookie =  uni.getStorageSync('cookie');
					uni.showLoading({"title":"数据提交中..."});
					//新增API地址
					var url = this.$common.baseUrl + 'api/data/editFamilyJob';
					if(that.createEnable){
						//修改API地址
						url = this.$common.baseUrl + 'api/data/addFamilyJob';
					}
					uni.request({
						url: url,
						header: {'content-type': 'application/x-www-form-urlencoded','cookie':cookie},					
						data: that.form,
						method: 'POST',
						success: res => {
							uni.hideLoading();
							if (res.data.code == 1) {
								uni.showToast({title: '操作成功',duration: 2000})
								uni.navigateTo({
									url:'/pages/category/details?id='+that.form.family_id
								})
							}
						},
						fail: err => {uni.hideLoading();}
					})					
				}
			},
			checkForm(){
				if (!this.form.person_id) {
					this.$refs.uTips.show({title: '请选择家庭成员',type: 'error',duration: '2000'})
					return false;
				}
				return true;
			},
			getFamilyMembers() {
								
				var that = this;
				var cookie =  uni.getStorageSync('cookie');
				uni.showLoading({"title":"数据提交中..."});
				uni.request({
					url: this.$common.baseUrl + 'api/data/getFamilyMembers',
					header: {'content-type': 'application/x-www-form-urlencoded','cookie':cookie},					
					data: {family_id: that.family_id},
					method: 'POST',
					success: res => {
						uni.hideLoading();
						if (res.data.code == 1) {
							
							var formatRes = [];
							for(var i=0; i<res.data.data.length; i++){
								formatRes.push({value:res.data.data[i].id, label:res.data.data[i].name});
							}
							that.listFamilyMember = formatRes;
							console.log(res.data.data);
						}
					},
					fail: err => {uni.hideLoading();}
				})		
				
			},
			
			formatDictValueToList(dictValue, item){
				var res = [];
				for(var key in dictValue[item]){
					res.push({value:key, label:dictValue[item][key]});
				}
				return res;
			}
		}
	}
</script>

<style scoped>
	.title {
		height: 40rpx;
		width: 10rpx;
		background-color: #68B92E;
		margin: 20rpx 0 20rpx 20rpx;
	}

	.icon-title {
		display: block;
		line-height: 100rpx;
		padding-left: 10rpx;
		font-weight: bold;
	}

	.content {
		width: 95%;
		height: 80rpx;
		margin: 0 auto;
		background-color: #F7F7F7;
		border-radius: 15rpx;
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.content_remack {
		width: 95%;
		height: 280rpx;
		margin: 0 auto;
		background-color: #F7F7F7;
		border-radius: 15rpx;
		margin-bottom: 10rpx;
	}

	.content_text {
		font-size: 26rpx;
		letter-spacing: 2rpx;
		margin-left: 30rpx;
		width: 200rpx;
		
	}
	.content_text_remack{
		font-size: 26rpx;
		letter-spacing: 2rpx;
		margin-left: 30rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
	}
	.content_area{
		width: 95%;
		margin: 0 auto;
		height: 200rpx;
	}
	.right {
		width: 50rpx;
	}

	.right image {
		width: 30rpx;
		height: 30rpx;
	}

	>>>.u-input {
		border: none !important;
	}

	.content-input {
		flex: 1 !important;
	}

	.open_invoice {
		width: 400rpx;
		height: 90rpx;
		background-color: #68B92E;
		text-align: center;
		border-radius: 15rpx;
		margin: 20rpx auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.open_invoice text {
		font-size: 25rpx;
		font-family: Source Han Serif CN;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 20rpx;
		display: block;
	}
</style>
